<template>
	<view class="top-container">
		<view class="date-bar">{{dateStr()}}</view>
		<swiper class="swiper" @change="change" :current="current" v-bind:style="swiperStyleObj">
			<swiper-item v-for="item in items" :key="item.date">
				<view class="loading-simple" v-if="!item.loaded">
					数据加载中...
				</view>
				<view class="no-data" v-else-if="item.items.length === 0">
					没有数据~~
				</view>
				<memoryListCom v-else :items="item.items"></memoryListCom>
			</swiper-item>
		</swiper>

		<view class="fixed-bar">
			<uni-icons class="add-btn" type="plusempty" size="50" @click="add"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		getDateMs,
		getDate,
		daysSkip
	} from '../../common/date';
	import memoryListCom from './memoryListCom.vue';
	import {
		MemoryApi
	} from '../../backend/memory/MemoryApi';

	export default {
		components: {
			memoryListCom
		},
		data() {
			return {
				current: 1,
				date: new Date(),
				items: [],
				swiperStyleObj: {
					height: '100px'
				}
			}
		},
		created() {
			this.items = [{
					loaded: false,
					items: [],
					date: daysSkip(this.date, -1)
				},
				{
					loaded: false,
					items: [],
					date: daysSkip(this.date, 0)
				},
				{
					loaded: false,
					items: [],
					date: daysSkip(this.date, 1)
				},
			];
		},
		mounted() {
			console.log('memory show...');
			const initItem = this.items[this.current];
			this.loadDateInfo(initItem);
		},
		methods: {
			loadDateInfo(initItem) {
				if (initItem.loaded) {
					return;
				}
				MemoryApi.getListByDate(getDateMs(initItem.date)).then(res => {
					console.log('查询结果====', res);
					initItem.loaded = true;
					initItem.items = res;
					const currItem = this.items[this.current];
					if (initItem === currItem) {
						this.swiperStyleObj.height = res.length * 48 + 'px';
					}
				}).catch(e => {
					console.log('查询结果报错====', e);
				})
			},
			change(e) {
				const newIndex = e.detail.current;
				console.log('------', newIndex);
				this.current = newIndex;
				const currItem = this.items[this.current];
				if (currItem.loaded) {
					this.swiperStyleObj.height = currItem.items.length * 48 + 'px';
				} else {
					this.swiperStyleObj.height = '100px';
				}
				this.loadDateInfo(this.items[this.current])
			},
			dateStr() {
				return getDate(this.items[this.current].date);
			},
			add() {
				uni.navigateTo({
					url: "/pages/memory/memoryCreateEditPage/memoryCreateEditPage?type=create"
				})
			}
		}
	}
</script>

<style lang="scss">
	.top-container {

		.no-data,
		.loading-simple {
			text-align: center;
			margin: 100px;
			color: #555555;
		}

		.date-bar {
			text-align: center;
		}

		.swiper {
			min-height: 100px;

			.loading {
				display: flex;
				min-height: 100px;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}

		.fixed-bar {
			position: fixed;
			bottom: 30%;
			right: 20px;

			.add-btn {
				background-color: rgba(0, 0, 255, 0.8);
				border-radius: 50%;
				color: white !important;
				padding: 5px;
			}
		}
	}
</style>